<template>
  <div>
    
    <vita-group>
       <vita-input type="text" :max-length="10" :min-length="2"></vita-input>
    </vita-group>

  </div>

  <div>
    <vita-group>
      <vita-input type="text"></vita-input>
      <vita-text-area :max-length="100" :min-length="2" @change="textAreaChangeHandler"></vita-text-area >
    </vita-group>
  </div>
  <div>
    <vita-group title="示例一">
      <vita-cell title="文案一"></vita-cell>
      <vita-cell title="文案二"></vita-cell>
      <vita-cell title="文案三"></vita-cell>
      <vita-cell title="文案四"></vita-cell>
      <vita-cell title="文案五"></vita-cell>
      <vita-cell title="文案六" value="尾巴"></vita-cell>
    </vita-group>

    <vita-group>
      <vita-cell title="文案一"></vita-cell>
    </vita-group>
    
    <div style="margin: 10px;">
      <vita-button>default</vita-button>
      <vita-button type="primary">primary</vita-button>
      <vita-button type="warn" :disabled="true">delete</vita-button>
    </div>

    <div style="margin: 10px;">
      <vita-flex-group>
        <vita-flex-item><vita-button>default</vita-button></vita-flex-item>
        <vita-flex-item><vita-button type="primary">primary</vita-button></vita-flex-item>
        <vita-flex-item><vita-button type="primary">primary</vita-button></vita-flex-item>
        <!-- <vita-flex-item><vita-button type="warn" :disabled="true">delete</vita-button></vita-flex-item> -->
      </vita-flex-group>
    </div>

    <div style="">
      <vita-group> 
        <vita-radio :options=radioOptions value="多玩网络" :addon="true" addon-title="其他" placeholder="请输入一个值"></vita-radio>
      </vita-group>
      <vita-group>
        <vita-radio :options=radioOptions value="欢聚时代"></vita-radio>
      </vita-group>
    </div>

    <vita-group>
      <vita-switch title="消息推送" :value.sync="switch"></vita-switch>
    </vita-group>


  </div>
</template>

<script>

  import VitaGroup from '../components/group.vue'
  import VitaCell from '../components/cell.vue'
  import VitaButton from '../components/button.vue'
  import VitaFlexGroup from '../components/FlexGroup.vue'
  import VitaFlexItem from '../components/FlexItem.vue'
  import VitaRadio from '../components/Radio.vue'
  import VitaTextArea from '../components/TextArea.vue'
  import VitaInput from '../components/Input.vue'
  import VitaSwitch from '../components/Switch.vue'
  
  export default {
    components: {
      VitaGroup,
      VitaCell,
      VitaButton,
      VitaFlexGroup,
      VitaFlexItem,
      VitaRadio,
      VitaTextArea,
      VitaInput,
      VitaSwitch
    },
    data() {
      return {
        name: 'chenwenliang',
        radioOptions: ['欢聚时代', '多玩网络'],
        textValue: '',
        switch: true
      }
    },

    methods: {
      textAreaChangeHandler(e) {
        this.textValue = e
      }
    }
  }

</script>